<template>
  <div class="replyContainer">
    <!-- 评论组件 -->
    <CommentItem :comment="comment" />
    <hr />
    <!-- 这条评论的 回复列表 -->
    <Comment :artId="comment.com_id" type="c" />

    <!-- 底部区域 -->
    <div class="article-bottom">
      <!-- 发表回复 按钮 -->
      <van-button
        @click="isShowPost = true"
        class="comment-btn"
        type="default"
        round
        size="small"
        >发表回复</van-button
      >
    </div>
    <!-- /底部区域 -->

    <!-- 回复评论 弹层 -->
    <van-popup
      v-model="isShowPost"
      position="bottom"
      :style="{ height: '18%' }"
    >
      <!-- 发表评论组件 -->
      <PostComment
        v-model="isShowPost"
        :isCommentReplay="true"
        :aid="comment.com_id"
      />
    </van-popup>
  </div>
</template>

<script>
import CommentItem from './CommentItem.vue'
import PostComment from './PostComment.vue'
import Comment from './comment.vue'

export default {
  name: 'CommentReply',
  components: { CommentItem, Comment, PostComment },
  props: {
    // 被评论的 数据对象
    comment: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      // 是否显示 发表回复 弹出层
      isShowPost: false
    }
  },
  created() {
    console.log(this.comment)
  },
  methods: {},
  computed: {},
  watch: {}
}
</script>

<style lang="less" scoped>
.replyContainer {
  padding-top: 80px;
}
.article-bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-sizing: border-box;
  height: 88px;
  border-top: 1px solid #d8d8d8;
  background-color: #fff;
  .comment-btn {
    width: 282px;
    height: 46px;
    border: 2px solid #eeeeee;
    font-size: 30px;
    line-height: 46px;
    color: #a7a7a7;
  }
}
</style>
